<template>
  <div class="swiper">
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="(item, index) in swiperList" :key="index">
        <img :src="item" width="100%" height="100%" />
      </el-carousel-item>
    </el-carousel>
    <div class="classify">
      <div class="title">课程分类</div>
      <div class="classifyList">
        <div class="item" v-for="(item, index) in classify" :key="index" @click="goList(item)">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [
        require("../assets/swiper1.png"),
        require("../assets/swiper2.png"),
        require("../assets/swiper3.png"),
        require("../assets/swiper4.png"),
      ],
      classify: [
        "编程开发",
        "数据分析",
        "影视动画",
        "办公软件",
        "工业产品",
        "游戏分类",
        "全部分类",
      ],
    };
  },
  methods: {
    goList(e) {
      this.$store.dispatch('fenleiTitle',e)
      this.$router.push({
        path:'/list'
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  width: 100%;
  //   height: 100px;
  margin-bottom: 5px;
  position: relative;
  .classify {
    width: 200px;
    height: 100%;
    position: absolute;
    left: 180px;
    bottom: 0px;
    z-index: 9999;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(1px);
    display: flex;
    flex-direction: column;
    // justify-content: jus;
    align-items: center;
    .title {
      font-size: 16px;
      height: 15%;
    //   line-height: 15%;
    display: flex;
    align-items: center;
    }
    .classifyList {
      height: 85%;
      padding: 20px 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .item{
        cursor: pointer;
      }
    }
  }
}
</style>
